<template>
  <div>
    <div id="remarkItem">
      <div class="left">
        <div class="img">
          <img :src="avatar" alt="头像" />
        </div>
      </div>
      <div class="right">
        <div>
          <span class="username">{{ username }}</span>
          <span>{{ format }}</span>
          <span @click="backRecomment">回复</span>
        </div>
        <p>
          <span style="font-size: 15px; color: #808080">@{{ username }}</span>
          {{ formatContent }}
        </p>
      </div>
    </div>
    <!-- <transition name="fadeIn">
      <tip v-if="delRemarkShow" :text="textTip" @config="configDel" @cancel="cancelDel"></tip>
    </transition>-->
  </div>
</template>

<script setup lang="ts">
// import tip from "../../components/tips";
import { formatTime } from "../../formatTime";
import { ref, computed, defineProps, defineEmits } from "vue";
import $axios from "@/http";
import { useStore } from "vuex";
const $store = useStore();
const showMsg = ref<boolean>(false);
const delRemarkShow = ref<boolean>(false);
const isShowColor = ref<boolean>(false);
const recommentGoodNum = ref<number>(0);

const format = computed(() => {
  return formatTime(props.time);
});

const formatContent = computed(() => {
  return props.content.replace(/&gt;/g, ">").replace(/&lt;/g, "<");
});
const props = defineProps(["content", "goodNum", "time", "username", "avatar", "id"]);
const showColor = () => {
  isShowColor.value = !isShowColor.value;
  $axios
    .post("/recomment/update", {
      id: props.id,
      goodNum: props.goodNum + 1,
    })
    .then((res) => {
      recommentGoodNum.value = recommentGoodNum.value + 1;
    });
};
const $emit = defineEmits(["callUser"]);
const backRecomment = () => {
  $emit("callUser", props.username);
};
const showDel = () => {
  delRemarkShow.value = true;
};
const configDel = () => {
  delRemark();
  delRemarkShow.value = false;
};
const cancelDel = () => {
  delRemarkShow.value = false;
};
const delRemark = () => {
  $axios
    .post("/recomment/del", {
      id: props.id,
      username: $store.getters.user.username,
    })
    .then((res) => {
      console.log(res);
      if (res.data.error === -1) {
      } else {
      }
    });
};
</script>

<style lang="scss" scoped>
@import url("../../css/comment/animate.css");
.showColor {
  color: #fb7299;
}

// @media screen and (max-width: 765px) {
//   #remarkItem {
//     display: flex;
//     .left {
//       text-align: center;
//       .img {
//         width: 40px;
//         height: 40px;
//         border-radius: 40px;
//       }
//       p {
//         margin-top: 5px;
//       }
//     }
//     .right {
//       margin-left: 10px;
//       div {
//         .username {
//           display: block;
//         }
//         span {
//           font-size: 14px;
//           margin: 0 10px;
//           transition: all 0.4s;

//           .icondianzan {
//             color: #e5e5e5;
//             &:active {
//               color: #fb7299;
//             }
//           }
//           i {
//             margin-right: 5px;
//             transition: all 0.4s;
//           }
//         }
//       }
//       p {
//         margin-top: 10px;
//         span {
//           color: #e2e2e2;
//         }
//       }
//     }
//   }
// }
@media screen and(min-width:765px) {
  #remarkItem {
    padding: 3px;
    margin: 8px 0;
    display: flex;
    .left {
      text-align: center;
      .img {
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      p {
        margin-top: 10px;
        transition: all 0.5s;
        &:hover {
          color: #e5e5e5;
        }
      }
    }
    .right {
      margin-left: 10px;
      div {
        span {
          margin: 0 8px;
          transition: all 0.4s;
          color: rgba(0, 0, 0, 0.4);
          font-size: 12px;
          &:nth-child(1) {
            font-size: 16px;
            color: #333;
          }
          &:nth-child(3) {
            &:hover {
              color: salmon;
            }
          }
        }
      }
      p {
        margin-top: 10px;
        margin-bottom: 10px;
        color: #616161;
        font-size: 14px;
        span {
          color: #616161;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
